<template>
    <div class="block">
        <el-carousel @change="(index) => currentSlide = index" trigger="click" height="330px" interval="5000" arrow="always">
            <el-carousel-item v-for="item in picData" :key="item.id">
                <div class="carousel-content">
                    <img :src="item.imgUrl" class="image" alt="carousel image" />
                    <div class="text-overlay">
                        <p class="title">{{ item.title }}</p>
                        <div class="subtext">
                            <span :class="['subtext-span', 'gradient-' + currentSlide]">{{ item.subtext }}</span>
                        </div>
                        <div class="content">{{ item.text }}</div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentSlide: 0,
            picData: [
                {
                    id: 0,
                    title: "轨道交通",
                    subtext: "轨道交通产业定义和分类",
                    imgUrl: require("@/assets/images/carousel/ft1.png"),
                    text: "轨道交通是指运营车辆需要在特定轨道上行驶的一类交通工具或运输系统。具体分类如下：铁路轨道交通‌：包括普通铁路和高速铁路，主要承担跨省、市的中远距离运输任务，特点是运行速度快、运输能力强。城市轨道交通‌：包括地铁、轻轨、有轨电车、市域快速轨道、现代有轨电车、磁悬浮列车等，主要承担城市内部中短距离的客运任务。"
                },
                {
                    id: 1,
                    title: "轨道交通",
                    subtext: "全球轨道交通装备行业的主要参与者",
                    imgUrl: require("@/assets/images/carousel/ft2.png"),
                    text: "全球轨道交通装备行业的主要参与者包括中国中车、阿尔斯通、庞巴迪、西门子等。中国中车是全球最大的轨道交通装备供应商，2023年实现营业收入2342"
                },
                {
                    id: 2,
                    title: "轨道交通",
                    subtext: "全球轨道交通产业现状",
                    imgUrl: require("@/assets/images/carousel/ft3.png"),
                    text: "‌中国‌：中国是全球轨道交通装备行业的领先者，城市轨道交通运营里程占全球比重近三成，地铁运营里程最长，占全球的48.60％。德国：城市轨道交通运营里程在全球排名第二。‌美国：地铁运营里程占全球的比重未超过10％，铁路营业里程超过25万公里。俄罗斯：城市轨道交通运营里程在全球排名第四。法国‌：城市轨道交通运营里程在全球排名第五。"
                }
            ]
        };
    }
};
</script>

<style scoped lang="scss">
.block {
    margin: 15px;
}

.carousel-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-overlay {
    position: absolute;
    right: 15%;
    top: 15%;
    bottom: 15%;
    left: 15%;
    color: #fff;
    text-align: center;
}

.title {
    font-size: 60px;
    margin-bottom: 10px;
}

.subtext {
    font-size: 28px;
    margin-bottom: 20px;
    position: relative;
}

.subtext-span {
    position: relative;
    width: 371px;
    height: 60px;
    padding: 9px 32px 7px 31px;
    text-transform: capitalize;
    transition: all 0.3s linear;
    z-index: 2;
    cursor: pointer;
}

.subtext-span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    transform: scaleX(1);
    transition-duration: 800ms;
    z-index: -1;
    background-image: linear-gradient(to right, #2a63df, #aef1f8); /* 默认背景 */
}

.gradient-0:after {
    background-image: linear-gradient(to right, #2a63df, #aef1f8);
}

.gradient-1:after {
    background-image: linear-gradient(to right, #ff5733, #ffbd4d);
}

.gradient-2:after {
    background-image: linear-gradient(to right, #349c1e, #99f6c2);
}

.subtext-span:hover {
    color: #ffffff;
    box-shadow: 2px 2px 20px 0px rgba(34, 34, 34, 0.1);
}

.subtext-span:hover:after {
    transform: scaleX(0);
    transition-duration: 1500ms;
}

.content {
    font-size: 16px;
}

/* 改变箭头大小 */
:deep .el-carousel__arrow--left {
    font-size: 60px;
}

:deep .el-carousel__arrow--right {
    font-size: 60px;
}
</style>